<template>
    <div id="deleteRemind">
        <div id="deleteRemindSlect" class="rounded-3xl p-5">

            <header class="flex justify-between items-center">
                <div class="flex">
                    <div class="w-2 self-stretch mr-2 my-2 rounded-xl bg-[#b2d9d6]"></div>
                    <span class="text-3xl p-3 text-[#585858]">Reminder</span>   
                </div>
            </header>

            <main id="mess">  
                    <h1 class="font-bold mb-5 mt-5">确定删除该任务？</h1>
                    <button id="ConButt" @click="deleteTask()">Confirm</button>
                    <button id="CanButt">Cance</button>
            </main>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            token:'',
            tid: 0
        };
    },
    created(){
        this.token =  localStorage.getItem('token');
    },
    methods:{
        deleteTask(){
            axios.post('http://49.232.214.76/normal/delTask',{
                header:{
                    'Authorization': 'Bearer ' + this.token,
                },
                data:{
                    "tid": this.tid,
                }
            }).then(res=>{
                console.log(res);
            })
        }
    }
}
</script>



<style>
    #deleteRemind{
        background: rgba(112, 112, 112, 0.5);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
    }
    #deleteRemindSlect{
        display: table;
        position: fixed;
        left: 33%;
        top:33%;
        width: 37.5rem;
        height: 18.75rem;
        background: white;
        opacity: 1;
        z-index: 30;
        text-align: center;
    }


    #ConButt{
        margin: 0.625rem auto;
        margin-left: 9.375rem;
        margin-right: 9.375rem;
        color:white;
        border-radius: 1.875rem;
        width: 10.75rem;
        height: 1.875rem;
        background-color: #b2d9d6;
    }
    #CanButt{
        margin: 0.625rem auto;
        margin-left: 9.375rem;
        margin-right: 9.375rem;
        color:white;
        border-radius: 1.875rem;
        width: 10.75rem;
        height: 1.875rem;
        background-color: #f2c2b6;
    }

    #CanButt:hover{
        box-shadow: 0px 0px 20px #888888;
    }
    #ConButt:hover{
        box-shadow: 0px 0px 20px #888888;
    }
</style>